<template lang="pug">
  Layout(
    :fullMap="fullMap")
    div.monitor-main(slot="main")
      DashboardHistory(
        v-if="isDevice"
        :devices="devices")
      AreaMesg(
        v-if="!isDevice"
        :areaId="areaId")
    Side(
      slot="side"
      :fullMap="fullMap"
      @changeFullMap="changeFullMap"
      @changeAreaId="changeAreaId"
      @changeDevices="changeDevices")
</template>

<script>
import Layout from '@/containers/Common/Layout'
import AreaMesg from './AreaMesg'
import DashboardHistory from './History'
import Side from './Side'
// import MonitorMap from '../index'
export default {
  name: 'Monitor',
  components: {
    Layout,
    AreaMesg,
    DashboardHistory,
    Side
  },
  data () {
    return {
      areaId: null,
      fullMap: true,
      isDevice: false,
      devices: []
    }
  },
  methods: {
    changeAreaId (value) {
      this.isDevice = false
      this.areaId = value
    },
    changeDevices (devices) {
      this.isDevice = true
      this.devices = devices
    },
    changeFullMap (value) {
      this.fullMap = value
    }
  }
}
</script>

<style lang="sass" scoped>
.monitor-main
  flex: 1
  display: flex
  flex-direction: column
</style>
